<template>
  <div>
    <el-card>
      <!-- 筛选区域 -->
      <el-row :gutter="20" type="flex" justify="start" align="middle">
        <el-col :span="8.5">
          <el-date-picker
              v-model="timeFrame"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
              style="width: 350px;"
          />
        </el-col>
        <!-- <el-col :span="5"> -->
        <el-button id="filter-button"  type="primary" @click="filterData">筛选</el-button>
        <el-button id="reset-button"  type="default" @click="resetFilter">重置</el-button>
        <!-- </el-col> -->
      </el-row>
      <!-- 列表区 -->
      <div class="list-area">
        <el-skeleton :loading="loading" animated>
          <el-table :data="paginatedData" border >
            <el-table-column prop="dataSeq" label="诊断序号" />
            <el-table-column prop="triggerTime" label="触发时间" />
            <el-table-column prop="warContent" label="监测内容" />
            <el-table-column prop="diagnosisResult" label="诊断结果" />
            <el-table-column prop="comments" label="备注" />
          </el-table>
        </el-skeleton>
      </div>
      <!-- 分页 -->
      <template #footer>
        <div style="margin-top: -30px">
          <Pagination
              :total="total"
              :current-page.sync="searchForm.current"
              :total-pages="totalPages"
              @update:currentPage="handlePageChange"
          />
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref, watch} from "vue";
import { useRouter } from 'vue-router'
import fdApi from '@/api/faultDiagnosis'
import Pagination from '@/components/Table/Pagination'

const router = useRouter();
// Dom 挂载之后
onMounted(() => {
  getFaultDiagnosesTableData();
})
//数据
const allTableData = ref([]);//接收后端全部结果
const tableData = ref([]);
const total = computed(() => tableData.value.length);//总记录条数
const totalPages = ref(1);//总页数
// 监听 allTableData 的变化，并同步更新 tableData
watch(allTableData, (newData) => {
  tableData.value = [...newData];
});

watch(total, (newData) => {
  totalPages.value = Math.ceil(newData / searchForm.size);
})

const handlePageChange = (page) => {
  searchForm.current = page;
};
//时间筛选
const timeFrame = ref('')

//搜索条件
const searchForm = reactive({
  current: 1,
  size: 10,
})

// 获取诊断结果列表
const getFaultDiagnosesTableData = async () => {
  //分页条件查询
  // const res = await fdApi.getFaultDiagnosesData({size: searchForm.size, current: searchForm.current});
  const res = await fdApi.getFaultDiagnosesData({size: null, current: null});//查询全部
  if (res.data.status) {
    //用all前缀来接收保存
    allTableData.value = res.data.data;
  } else {
    console.log(res.data.message);
  }
}

//分页监听
// 计算当前页需要显示的数据
const paginatedData = computed(() => {
  const start = (searchForm.current - 1) * searchForm.size;
  const end = start + searchForm.size;
  return tableData.value.slice(start, end);
});

//时间筛选数据
const filterData = () => {
  if (timeFrame.value.length === 2) {//确保用户选择了开始时间和结束时间
    const [startTime, endTime] = timeFrame.value;
    tableData.value = allTableData.value.filter(item => {
      const itemTime = new Date(item.triggerTime);
      return itemTime >= new Date(startTime) && itemTime <= new Date(endTime);
    });
  }
}
//重置时间筛选
const resetFilter = () => {
  timeFrame.value = [];
  tableData.value = [...allTableData.value];
}

const selectedTab = 'faultDiagnoses-management'; //

//加载loading页面
const loading = ref(true);
watch(
    () => paginatedData.value,
    (newValue) => {
      loading.value = !(newValue && newValue.length > 0);
    },
    //配置项确保在组件挂载时，立即执行一次回调，以根据初始值正确设置 loading 的状态
    { immediate: true } // 立即执行一次，以确保初始值状态正确
);

const handleSelect = (key) => {
  if (key !== null) {
    this.selectedTab = key;
  }
}
</script>

<style scoped lang="scss">
/*筛选-重置按钮*/

.el-button {
  @include button-style;
}

/* 选中菜单项样式 */
.el-menu-item.is-active {
  color: white!important;
  border: 1px solid #0062ff;
  background-color: #0062ff!important;
  height: 30px;
}
.el-menu--horizontal.el-menu {
  border-bottom: 1.5px solid #053789;
  display: block;
  width: 93vw;
}

/*嵌入后调整*/
.el-row.is-justify-space-between {
  justify-content: left !important;
}

#reset-button {
  background-color: $color-reset-button;

  &:hover {
    background-color: #babfd3;
  }
}
/*card背景、边框*/
.el-card {
  width: 100%;
  background-color: transparent;
  --el-card-border-color: transparent;
}
// /*数据表背景*/
// :deep(.el-table) {
//   color: $color-font-table;//字体颜色
//   background-color: transparent;
//   --el-table-tr-bg-color: transparent;
//   --el-table-header-bg-color: transparent;
//   --el-table-row-hover-bg-color: transparent;
:deep(.el-table) {
  background-color: transparent;
  // 鼠标悬停时的行样式
  .el-table__body-wrapper {
    .el-table__row {
      &:hover {
        color: $color-font-table-hover; // 悬停时字体颜色
      }
    }
  }
}
.list-area {
  @include list-area-style;
}
/*日期筛选框背景*/
:deep(.el-input__wrapper) {
  background-color: transparent;

}
/* 修改“开始时间”“结束时间”的占位符颜色 */
:deep(.el-date-editor .el-range-input ) {
  color: white;
}


:deep(.el-date-editor .el-range-separator ) {
  color: rgb(189, 189, 189);
}

</style>